import React from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Button} from '@tarojs/components';
import {AtModal, AtModalContent} from 'taro-ui';

import * as T from '../../types';
import actions from '../../actions/index';
import {store2Props} from '../../selectors';
// import {OSS_PATH_PREFIX, OSS_BASE_PATH_PREFIX} from '../../constant';

type IInfoProps = T.IProps & T.IInfoProps;

import './MemberModal.less';
import 'taro-ui/dist/style/components/modal.scss';

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
/**
 * 会员模态框
 */
export default class MemberModal extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      OPERATES: [
        {
          label: '冷漠拒绝',
          func: 'handleCancel',
          className: 'cancelBtn',
        },
        {
          label: '开通会员',
          func: 'handleActivate',
          className: 'activateBtn',
        },
      ],
      atModal: {
        closeOnClickOverlay: false,
      },
    };
  }

  /**
   * 残忍拒绝
   */
  handleCancel = () => {
    this.props.onCancel();
  };

  /**
   * 开通会员
   */
  handleActivate = () => {
    // 开通会员界面跳转
    this.props.onActivate();
  };

  /**
   * 渲染
   * @returns
   */
  render() {
    let {
      visible,
      navbarSettings,
      actions: {action},
    } = this.props;
    const {OPERATES, atModal} = this.state;
    return (
      <AtModal
        isOpened={visible}
        className="memberModal"
        closeOnClickOverlay={atModal.closeOnClickOverlay}
        atModalStyle={{top: navbarSettings.navBarHeight}}
      >
        <AtModalContent>
          <View className="modalContent">
            <View className="modalHeader">
              <View>很抱歉 您还不是会员哦~</View>
              <View>开通会员即可尽情畅玩</View>
            </View>
            <View className="modalFooter">
              {OPERATES.map((i: any, index: number) => (
                <View key={'operate' + index} className={i.className}>
                  <Button onClick={() => this[i.func](i)} className={i.className + 'Button'}>
                    {i.label}
                  </Button>
                </View>
              ))}
            </View>
          </View>
        </AtModalContent>
      </AtModal>
    );
  }
}
